<template>
  <div class="about">
    <h1>来自vuex的数据{{ $store.state.msg }}</h1>
    <h1>This is an about page</h1>
    <!-- <input type="text" v-model="title" /> <button @click="add">添加</button> -->
    <add></add>

    <h6>已完成{{ $store.getters.num1[1] }}</h6>
    <h6>未完成{{ $store.getters.num1[0] }}</h6>

    <ul>
      <li v-for="(item, index) in $store.state.list" :key="index">
        <input type="checkbox" v-model="item.status" />
        <span> {{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import add from "../components/Add.vue";
export default {
  // computed: {
  //   list() {
  //     return this.$store.state.list;
  //   },
  //   //
  // },
  data() {
    return {
      title: "",
    };
  },
  created() {
    // this.$axios.get("list.json").then((res) => {
    //   this.$store.commit("setlist", res.data.list);
    // });
    //进入页面请求 list.json中的数据 并通过mutation把数据存在vuex里

    this.$store.dispatch("getlist");
    //进入页面调用action方法 getlist
  },
  methods: {
    add() {
      this.$store.commit("add", this.title);
      //调用vuex里的mutation方法 add,并且把你输入的title作为参数传递给vuex
    },
  },
  components: {
    add,
  },
};
</script>
